<template>

  <div id="AdviceContent" class="mainContent">
    <div class="timeBox">
      <input class="iptEvent" type="button" value="添加事件" data-id="-1" @click="addEvent($event)" />
    </div>
    <div class="countThead">
      <table class="table">
        <thead>
          <tr>
            <th class="text-center" width="5%">序号</th>
            <th class="text-center" width="20%">事件名称</th>
            <th class="text-center" width="12%">事件类型</th>
            <th class="text-center" width="12%">开始时间</th>
            <th class="text-center" width="12%">结束时间</th>
            <th class="text-center" width="14%">操作</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="countTbody" v-if="patientList.length" @scroll="onScroll">
      <table class="table table-striped">
        <tbody>
          <tr v-for="(item,index) in patientList" :key=index :data-id="item.Id" @click="addEvent($event)">
            <td class="text-center timeStart" width="5%">{{item.Id}}</td>
            <td class="limitHeight" width="20%">{{item.EventName}}</td>
            <td class="text-center" width="12%">{{item.EventType | numFilter}}</td>
            <td class="text-center" width="12%">{{item.StartTime |  filterDateTime}}</td>
            <td class="text-center" width="12%">{{item.EndTime |  filterDateTime}}</td>
            <td class="text-center" width="14%"><input type="button" class="athm-btn--mini" value="删除" :data-id="item.Id" @click="deleteEvent($event)" /></td>
          </tr>
        </tbody>
      </table>
      <Loading v-if="showScroll"></Loading>
    </div>
    <modal ref="alert" :title="'添加事件'" :sureBtn="addEventTitle" :btnSave="'保存'">
      <input type="hidden" value="eventData.id" /><input type="hidden" value="eventData.EventValue" />
      <div class="eventItem">事件类型：&nbsp;&nbsp;&nbsp;<input type="radio" id="eventType" value="0" name="eventType" v-model="eventData.EventType" checked /><label for="eventType">自定义事件</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="-1" id="event" name="eventType" v-model="eventData.type" /><label for="event">医嘱事件</label></div>
      <div class="eventItem">时间范围：&nbsp;&nbsp;&nbsp;<vue-datepicker-local class="" v-model="eventData.time" format="YYYY-MM-DD HH:mm:ss" clearable :placeholder="'请选择时间范围'"/></div>
      <!--<div class="eventItem">事件颜色：&nbsp;&nbsp;&nbsp;<input type="color" v-model="eventData.color" class="alertTitle" maxlength="16" /> </div>-->
      <div class="eventItem">事件名称：&nbsp;&nbsp;&nbsp;<input type="text" v-model="eventData.EventName" class="alertTitle" maxlength="16" />
      <!--<input type="button" value="选择医嘱" style="height:34px;"/>-->
      </div>

    </modal>
    <confirm ref="clearAll" :message="'确定删除吗？'" :sureBtn="clearAllSigns"> </confirm>
    <Loading v-if="isShow &&patientList.length== 0"></Loading>
    <noSearch v-if="!isShow && patientList.length == 0"></noSearch>
  </div>
   

</template>
<script>
  import { apiEventList, apiEventById, apiEventEditOrAdd, apiEventDelete } from "@/api/api"; // 导入接口
  import Loading from "@/components/loading/loading"  //导入loading组件
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import modal from '@/components/modal/modal'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import confirm from '@/components/confirm/confirm'
  export default {
    data: function () {
      return {
        isShow: true,
        patientList: [],
        pageSize: 20, //每页显示20条数据
        currentPage: 1, //当前页码
        count: 0, //总页数
        Id: '', //当前点击的列表ID
        emptyTime: [],
        dataTime: '0000-00-00',
        //懒加载
        isScroll: true,
        showScroll: false,
        eventData: {
          id:0,
          EventType: '0',
          time: [],
          StartTime: '',
          EndTime: '',
          Patient_Visitid: '',
          //color:'',
          EventName: '',
          EventValue:'165',
        },
      }
    },
    watch: {
      dataTime: {
        handler(curVal, oldVal) {
          if (this.dataTime == '') {
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.patientList = [];
            this.getMedicalOrderList();
          } else if (this.dataTime == "NaN-NaN-NaN") {
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.patientList = [];
            this.getMedicalOrderList();
          } else {
            this.isShow = true;
            this.patientList = [];
            this.getMedicalOrderList();
          }
        }
      }
    },
    created() {
     
    },
    mounted() {
      //window.addEventListener('scroll', this.onScroll)
      //请求第一页数据
      this.getMedicalOrderList();
      Bus.$on("timePicker", e => {
        this.patientList = [];
        this.dataTime = e.trim();
      });
    },
    methods: {
      // 获取事件列表数据
      getMedicalOrderList() {
        apiEventList({
          pageIndex: this.pageSize * this.currentPage - 19,
          pageSize: this.pageSize * this.currentPage,
          patientId: this.$store.getters.ID,
        })
          .then(res => {
            if (JSON.parse(res).Status == -1) {
              this.isShow = false;
              this.isScroll = false;
            }
            if (JSON.parse(res).Status == 1) { //判断是否获取成功 为1是成功，-1为不成功
              if (JSON.parse(res).Data.length == 0) {
                this.isShow = false;
                this.isScroll = false;
                this.patientList = [];
              } else {

              this.isShow = true;

              if (this.currentPage == 1) {
                this.patientList = []
              }
                this.patientList.push.apply(this.patientList, JSON.parse(res).Data);
              //console.log(this.patientList)
              this.isScroll = true;
              this.showScroll = false;
                this.count = Math.ceil(JSON.parse(res).TotalCount / this.pageSize); //计算总页数

              }
            }
          })
      },
      getEventById() {
        apiEventById({
          Id: this.Id,
        })
          .then(res => {
            if (JSON.parse(res).Status == 1) { //判断是否获取成功 为1是成功，-1为不成功
              this.eventData.EventName = JSON.parse(res).Data["EventName"];
              this.eventData.EventType = JSON.parse(res).Data["EventType"];
              this.eventData.time = [JSON.parse(res).Data["StartTime"], JSON.parse(res).Data["EndTime"]];
              this.eventData.id = JSON.parse(res).Data["Id"];
              this.eventData.EventValue = JSON.parse(res).Data["EventValue"];
              this.$refs.alert.show();
            }
          })
      },
      deleteEvent(event) {
        event.stopPropagation(); //阻止事件冒泡
        this.id = event.currentTarget.getAttribute("data-id");
        this.$refs.clearAll.show();
      },
      clearAllSigns() {
        apiEventDelete({
          Id: this.id,
        })
          .then(res => {
            if (res.Status == 1) {
              this.$toast.center("删除成功");
              this.getMedicalOrderList();
            } else {
              this.$toast.center("删除失败，请重试!");
            }
          })
      },
      addEvent(event) {  //点击添加事件按钮出现添加弹出框
        let id = event.currentTarget.getAttribute("data-id");
        if (id != '-1') {
          this.Id = id;
          this.getEventById();
        } else {
          this.$refs.alert.show();
        }
       
      },
      addEventTitle() {   //弹出框确定按钮事件
        this.eventData.Patient_Visitid = this.$store.getters.ID;
        this.eventData.StartTime = this.eventData.time[0];
        this.eventData.EndTime = this.eventData.time[1];
        //console.log(this.eventData)
        apiEventEditOrAdd({
          eventAnalysis: this.eventData
        })
          .then(res => {
            if (res.Status == 1) { //判断是否获取成功 为1是成功，-1为不成功
              this.$toast.center("保存成功");
              this.$router.push({
                path: '/eventsAnalysis/eventsReport',
                query: {item:10}
              })
            }
          })
      },
      onScroll() {
        let viewH = $('.countTbody').height();//可见高度
        let contentH = $('.countTbody table').height();//内容高度
        let scrollTop = $('.countTbody').scrollTop();//滚动高度
        if (scrollTop / (contentH - viewH) == 1 && this.isScroll) { //到达底部100px时,加载新内容
          if (this.currentPage >= this.count || !this.isScroll) {
            if (contentH - viewH - scrollTop <= 25) {
              this.$toast.center('已加载所有列表！');
            }
            return
          }
          this.currentPage++;
          this.showScroll = true;
          this.isScroll = false;
          this.getMedicalOrderList();
        }
      },

    },
    filters: {
      filterDateTime(time) {
        if (!time) {
          return ''
        } else {
          return time.replace('T', ' ').substring(5, 16);
        }
      },
      numFilter(str) {
        return str == 0 ? "自定义事件" : str == 1 ? "临嘱药嘱" : str == 2 ? "长嘱药嘱" : str == 3 ? "临嘱非药嘱" : str == 4 ? "长嘱非药嘱":"";
      }
    },
    //显示的声明组件
    components: {
      Loading,
      noSearch,
      modal,
      VueDatepickerLocal,
      confirm
    },

  }
</script>
<style scoped>
  #AdviceContent {
    padding-bottom: 15px;
    overflow-y: auto;
    padding: 15px 0 0 0;
  }
  .datepicker-range{
    width:380px;
  }
 .datepicker-range input {
      width: 300px;
    }
  .checkBox {
    margin-left: 2.5%;
    height: 36px;
    line-height: 36px;
    width: 328px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f6f6f6;
    cursor: pointer;
    margin-bottom: 15px;
    margin-right: 30px;
  }
  .alertTitle{
    height:34px;
    padding-left:5px;
  }
  .btn-search {
    width: 210px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding-left: 10px;
    vertical-align: top;
  }
  .athm-btn--mini {
    color: red;
    background-color: #fff;
    border: 1px solid red;
    min-height: 20px;
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px;
    border-radius: 2px;
  }
  .select {
    width: 80px;
    height: 100%;
    float: left;
  }

  .table > thead > tr > th {
    border-bottom: none;
  }
  .eventItem{
    height:40px;
    display:flex;
    align-items:center;
    margin-bottom:10px;
  }
    .eventItem input[type=radio]{
      margin:0;
      margin-right:5px;
    }
    .countThead, .countTbody {
      width: 97%;
      margin: 0 auto;
      /*border:1px solid #f4f4f4;*/
      border-top: none;
    }

  .countTbody {
    border: 1px solid #ddd;
    border-top: 0;
  }

  .table {
    margin-bottom: 0;
  }

  .countThead thead tr {
    height: 42px;
    line-height: 42px;
    background-color: #11a7f3;
    color: #fff;
  }

  .countThead > thead > tr > th {
    border-bottom: none;
  }

  .countTbody {
    max-height: calc(100% - 200px);
    overflow-y: auto;
  }

    .countTbody tbody tr td {
      vertical-align: middle;
      border-top: 1px solid #ddd;
      color: #333;
      border-right: 1px solid #ddd;
    }

      .countTbody tbody tr td:last-child {
        border-right: none;
      }

    .countTbody tbody > tr:first-child > td {
      border-top: none;
    }

    .countTbody tbody tr td.limitHeight {
      vertical-align: middle;
      line-height: 20px;
      padding-left: 8px;
      color: #02bb96;
    }

  .select p {
    color: #000;
    position: relative;
    text-indent: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    .select p:after {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      background-image: url("../../../../static/images/unfold_arron.png");
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle;
      margin-left: 8px;
    }

    .select p.up:after {
      background-image: url("../../../../static/images/up_arron.png");
    }

  .list-link {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: 20px;
    width: 100px;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

  .channel {
    width: 190px;
    left: -25px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }

  .list-link li {
    text-align: center;
    cursor: pointer;
  }

    .list-link li:hover {
      background-color: #f6f6f6;
      border-bottom: 1px solid #ccc;
    }
  .iptEvent {
    padding: 7px 15px;
    background-color: #11a7f3;
    color: #fff;
    border: 0;
  }
  .timeBox {
    padding-left: 46px;
    padding-bottom: 20px;
    padding-right: 50px;
    text-align:right;
  }
  @media screen and (max-height:770px) {
    .countTbody {
      max-height: calc(100% - 100px);
      overflow-y: auto;
    }
    .margin-0 {
margin: 0;

    }
    .datepicker-range{
    width:auto;
  }
  }

  @media screen and (max-height:1000px) {
    .countTbody {
      max-height: calc(100% - 120px);
      overflow-y: auto;
    }
  }

  @media screen and (min-height:1000px) {
    .countTbody {
      max-height: calc(100% - 300px);
      overflow-y: auto;
    }
  }
  @media screen and (max-width: 768px) {
    .countThead, .countTbody {
      width: 700px;
      margin: 0 auto;
      /*border:1px solid #f4f4f4;*/
      border-top: none;
    }
}
@media screen and (max-width: 425px) {
}
  
</style>
